<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24 - window 对象</title>
</head>
<body>
    <input type="button" value="前进按钮">

    <input type="button" value="跳转到百度页面" class="baidu">

    <script>

        // window 对象      是 webAPI 中的顶级对象 (老大)


        // DOM 操作         本质上操作网页, window 顶级对象中包含了网页
        
        // 在 webAPI 中, 将整个网页也封装成了一个对象, 这个对象叫 document

        console.log(window);
        console.log(document);





        // window 顶级对象中包含了
        // 1. 方法     alert()   confirm()  clearInterval()  setInterval()
        
        // 2. 属性     history      navigator      location


        // a) history 属性使用
        // 语法:
        // ☛    window.history
        console.log(window.history);    // history 属性是一个对象

        // b) 通过 history 如何查看网页中的历史记录
        // 语法:
        // ☛    history.back();         功能和浏览器中后退按钮的功能是一样的
        // ☛    history.forward();      功能和浏览器中前进按钮的功能是一样的

        // 代码演示:
        let btn = document.querySelector('input');
        btn.addEventListener('click', function(){
            history.forward();
            history.back();

            history.go(1);
            history.go(-1);
        });



        // a) navigator 属性使用
        // 语法:
        // ☛    window.navigator         // 用来记录当前设备一些信息(操作系统, 浏览器, 浏览器版本, 蓝牙...)
        console.log(window.navigator);    // navigator 属性是一个对象

        // b) navigator 中的一个重要属性 
        //   onLine 属性     用来记录当前网络状态
        console.log(navigator.onLine);
        // true    代表当前处于联网的状态
        // false   代表当前处于断网的状态



        // a) location 属性使用
        // 语法:
        // ☛    window.location         // 用来记录浏览器中地址栏中的网址
        console.log(window.location);    // location 属性是一个对象

        // b) 可以获取当前网址
        // 语法:
        // ☛    location.href
        console.log(location.href);

        // c) 设置网页地址(实现页面跳转)
        // 语法:
        // ☛    location.href = '网址'
        
        // 代码演示:
        let baidu = document.querySelector('.baidu');
        baidu.addEventListener('click', function(){
            location.href = 'http://www.baidu.com';
        });



        // a) location 中的方法
        // assign() 方法        委派, 这个方法是用来实现页面跳转
        //                      location.assign('http://www.baidu.com');
        // reload() 方法        加载页面, 刷新页面(功能和浏览器中的刷新按钮一样的)
        //                      可以设置布尔值, true 或者 false


        
    </script>
</body>
</html>